<template>
  <div class="off-submit">
    <Form ref="formValidate" :model="formItem" :rules="ruleValidate"  label-position="top">
      <FormItem label="关键字" prop="keyword">
        <Input v-model="formItem.keyword" placeholder="例：后台管理"></Input>
      </FormItem>
      <FormItem label="技术选型" prop="technology">
        <Input v-model="formItem.technology" placeholder="例：Vue+Element-UI"></Input>
      </FormItem>
      <FormItem label="后台技术">
        <Input v-model="formItem.backend" placeholder="例：node.js"></Input>
      </FormItem>
      <FormItem label="上传材料">
        <Upload
          multiple
          type="drag"
          action="//jsonplaceholder.typicode.com/posts/">
          <div style="padding: 10px 0">
            <Icon type="ios-cloud-upload" size="46" style="color: #086f7c"></Icon>
            <p>点击/拖拽上传材料</p>
          </div>
        </Upload>
      </FormItem>
      <FormItem label="补充说明" prop="desc">
        <Input v-model="formItem.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="例：后台管理+Vue+Elemnet-UI+node.js"></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" long>提交</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: 'submit',
    data () {
      return {
        formItem: {
          keyword: '',
          technology: '',
          backend: '',
          desc: ''
        },
        ruleValidate: {
          keyword: [
            { required: true, message: '网站类型不能为空', trigger: 'blur' }
          ],
          technology: [
            { required: true, message: '技术选型不能为空', trigger: 'blur' }
          ]
        }
      }
    }
  }
</script>

<style scoped lang="scss">
.off-submit{
  padding: 10px 8px;
  /deep/ .ivu-form-item-label{
    font-size: 12px;
  }
}
</style>
